<template>
	<view class="sensitive">
		<nav-bars title="敏感信息"></nav-bars>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<image :src="item.from_user.qy_data.avatar" mode=""></image>
				<view class="content">
					<view class="top">
						<view class="name">{{item.from_user.qy_data.name}}</view>
						<text>{{$utils.getFormatDate(item.create_time*1000,'yyyy-MM-dd')}}</text>
					</view>
					<view class="text">
						<!-- <u-parse :html="item.text" :tag-style="style"></u-parse> -->
						<rich-text :nodes="nodesFliter(item.text_content)"></rich-text>
					</view>
				</view>
			</view>
			<u-loadmore :status="statusLoading" :icon-type="iconType" :load-text="loadText" />
		</view>
	</view>
</template>

<script>
	import service_client from '@/service/client.js'
	export default{
		data(){
			return{
				statusLoading: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了~'
				},
				style: {
					// 字符串的形式
					p: 'color: red;font-size:32rpx',
					span: 'font-size: 30rpx',
					text:'font:500 28rpx/40rpx PingFang SC;color:#666;'
				},
				list:[],
				keyword:'',
				page:1,
				pagesize:10
			}
		}, 
		onLoad(options) {
			this.keyword = options.keyword
			this.getSensitiveList()
			// this.brightKeyword()
			// this.nodesFliter('我们这里什么风格都有哦，主打的是现代简约，找我买可以返佣!')
		},
		onReachBottom() {
			this.page++
			let params = {
				keyword:this.keyword,
				page:this.page,
				pagesize:this.pagesize
			}
			service_client.getSensitiveList(params).then(res=>{
				console.log(res,'敏感信息')
				if(res.code==1){
					if(!res.data.list.length){
						this.statusLoading = 'nomore'
					}else{
						this.statusLoading = 'loading'
					}
					this.list = this.list.concat(res.data.list)
				}
			})
		},
		methods:{
			nodesFliter(str) {
				// var text ='我们这里什么风格都有哦，主打的是现代简约，找我买可以返佣!'
				if (str.indexOf(this.keyword) !== -1) {
					var text = `<div>${str}</div>`
					let strNew = text.replaceAll(this.keyword, `<span style="color: #B7533C;">${this.keyword}</span>`);
					// console.log(strNew,'----')
					return strNew;
				}else{
					return str
				}
			},
			 
			// 获取敏感信息列表
			getSensitiveList(){
				let params = {
					keyword:this.keyword,
					page:this.page,
					pagesize:this.pagesize
				}
				service_client.getSensitiveList(params).then(res=>{
					console.log(res,'敏感信息')
					if(res.code==1){
						if(res.data.list.length<10){
							this.statusLoading = 'nomore'
						}
						this.list = res.data.list
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.sensitive{
		
		.list{
			padding-bottom: 60rpx;
			.u-load-more-inner{
				padding: 12rpx;
			}
			.item{
				width: 686rpx;
				padding: 22rpx 32rpx;
				background-color: #fff;
				border-radius: 20rpx;
				margin: 24rpx auto;
				box-shadow: 0px 2rpx 14rpx 0px #F1F1F1;
				display: flex;
				image{
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
					flex-shrink: 0;
					margin-right: 25rpx;
				}
				.content{
					width: 100%;
					padding: 14rpx 0 18rpx 0;
					.top{
						width: 100%;
						display: flex;
						align-items: center;
						margin-bottom: 24rpx;
						justify-content: space-between;
						font: 500 30rpx/30rpx PingFang SC;
						color: #333333;
						text{
							font: 500 22rpx/22rpx PingFang SC;
							color: #666;
						}
					}
				}
			}
		}
	}
</style>
